<template>
    <div class="confirmWrapper" v-if="confirmShow">
        <div flex-box="1" class="msg" v-text="msg" flex="main:center cross:center"></div>
        <div flex-box="0" class="bottomBtn" flex="main:justify cross:center">
            <div @click="cancel()" flex-box="1" flex="cross:center main:center">取消</div>
            <div class="confirmBtn" @click="confirmEvent" flex-box="1" flex="cross:center main:center">确定</div>
        </div>
    </div>
</template>

<script>
    export default {
        props: [
            'msg'
        ],
        data() {
            return {
                confirmShow: false
            };
        },
        methods: {
            cancel() {
                this.confirmShow = false;
            },
            confirmEvent() {
                this.$emit('confirm')
            }
        }
    };
</script>

<style lang="scss" scoped>
    .confirmWrapper {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 2.8rem;
        height: 1.7rem;
        background: #fff;
        border-radius: 0.1rem;
        z-index: 99999;
        font-size: 0.14rem;
        color: #000;
    }

    .bottomBtn {
        height: 0.44rem;
    }

    .confirmBtn {
        color: #1dc6b4;
        height: 100%;
        border-left: 1px solid rgba(0, 0, 0, .2);
    }

    .msg {
        height: calc(100% - 0.44rem);
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        width: 100%;
    }
</style>